<template>
  <div class="showFixed">
    <div class="invoiceBtn fixedTop fixedTopBg">
      <div></div>
      <div>
        <el-button class="btnNo btns" @click="removeData">取消</el-button>
        <el-button class="btnAc btns" @click="saveInvoice">保存</el-button>
      </div>
    </div>

    <el-card class="margintop" :body-style="{ padding: '0px' }">
      <div class="cardHead">
        <h3>发票抬头管理</h3>
      </div>
      <div class="invoceBox">
        <p class="tip">*注以下为发票打印信息，请与公司注册信息仔细核对并谨慎填写</p>
        <el-form label-position="right" label-width="80px" :model="invoceData" :rules="rules" ref="invoiceRef"  :disabled="disabledForm">
          <el-row :gutter="20">
            <el-col :span="11" :offset="0">
              <el-form-item label="公司名称" label-width="79px" disabled >
                <el-input placeholder="请输入公司名称" v-model.trim="invoceData.name" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form-item label="税号" label-width="79px">
                <el-input placeholder="请输入税号" v-model.trim="invoceData.code" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="0">
              <el-form-item label="注册地址" label-width="79px" prop="region_info">
                <el-cascader  :placeholder="defaultarea" :class="{haveData:initValue}" ref="regLabel" :options="areaData"  v-model.trim="invoceData.region_info" :props="areaProps" @change="areaChange"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form-item label="注册电话" label-width="79px" prop="member_mobile">
                <el-input placeholder="请输入注册电话" v-model.trim="invoceData.member_mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="0">
              <el-form-item label="" label-width="79px" prop="reg_address">
                <el-input placeholder="请输入详细地址" v-model="invoceData.reg_address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form-item label="开户行" label-width="79px" prop="company_finance.bank">
                <el-input placeholder="请输入开户行" v-model="invoceData.company_finance.bank"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="0">
              <el-form-item label="开户号"  label-width="79px" prop="company_finance.bank_amount">
                <el-input placeholder="请输入开户号" v-model.trim="invoceData.company_finance.bank_amount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23" :offset="0">
              <el-form-item label="备注"  label-width="79px">
                <el-input type="textarea" placeholder="请输入开票要求" rows='5' v-model.trim="invoceData.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import merge from 'deepmerge'
import loginApi from '@/api/loginApi.js';
export default {
  components: {},
  data () {
    return {
      areaData:[],
      areaProps:{    //注册地址
        lazy: true,
          lazyLoad (node, resolve) {
            const level = node.level;
            const resData = {}
            if(level === 0){
              resData.pid=0
              resData.level=1
            }
            if(level === 1){
              resData.pid=node.value
              resData.level=2
            }
            if(level === 2){
              resData.pid=node.value
              resData.level=3
            }
            loginApi.getArea(resData)
            .then(res => {
              const data=res.data
              data.forEach(item => {
                item.value=item.id
                item.label=item.name
                item.leaf = level >= 2
              });
              resolve(res.data)
            })
          }
      },
      defaultarea:'请选择省市区',    //省市区
       initValue:false,
      disabledForm:false,
      invoceData:{
        name:'',    //公司名称
        code:'',    //税号
        region_id:'',    //注册三级省市区
        region_info:'',   //注册三级省市区中文
        reg_address:'',   //注册详细地址
        member_mobile:'',    //注册电话
        remark:'',    //备注
        province:'',
        county:'',
        city:'',
        company_finance:{
          bank:'',    //开户行
          bank_amount:'',    //开户号
        }
      },
      rules:{
        region_info: [
          { required: true, message: '请输入注册地址', trigger: 'blur' },
        ],
        reg_address: [
          { required: true, message: '请输入注册地址', trigger: 'blur' },
        ],
        member_mobile: [
          { required: true, message: '请输入注册电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确手机号", trigger: "blur" },
          
        ],
        'company_finance.bank': [
          { required: true, message: '请输入开户行', trigger: 'blur' },
        ],
        'company_finance.bank_amount': [
          { required: true, message: '请输入开户号', trigger: 'blur' },
        ],
      }
    };
  },
  created () {
    this.getInvoice()
  },
  methods: {
    // 获取发票抬头数据
    async getInvoice(){
      let res = await this.$http.companyApi.companyInvoice();
      console.log(res);
      if(res.status==200){
        const data = merge(this.invoceData,res.data)
        this.invoceData=data
        if(res.data.province && res.data.province!=''){
            this.defaultarea=res.data.province+' / '+res.data.county+' / '+res.data.city
            this.initValue = true
        }else{
          this.initValue = false
        }
      }
    },
    //保存发票抬头信息
    async saveInvoice(){
      this.$refs.invoiceRef.validate((valid) => {
        if (valid) {
          const params=this.invoceData
          this.$http.companyApi.companyEditInvoice(params).then(res => {
            if(res.status === 200){
              this.$message.success("保存成功")
              this.$router.go(0)
            }
          })
        } else {
          this.$message.warning("请完整填写邮寄地址信息")
        }
      });      
    },
    //清空表单
    removeData(invoceData){
      this.$refs['invoiceRef'].resetFields();
    },
    //寄送地址
    areaChange(value){
      if(value){
        let labelData=this.$refs['regLabel'].getCheckedNodes()[0].pathLabels
        this.invoceData.province=labelData[0]
        this.invoceData.city=labelData[1]
        this.invoceData.county=labelData[1]
        this.invoceData.region_info=value.join('')
      }
    },
  },
}

</script>

<style scoped>
.margintop{
  margin-top: 72px;
}
.invoceBox{padding: 24px 10.38% 24px 24px;}

.tip{
  font-size:12px;
  color: #F5222D;
  margin-bottom: 24px;
}

</style>